<template>
  <div class="networkconfig">
    <!-- -->
    <div class="con">
        <div class="topbtn">
          <span></span>
          <el-button type="primary" @click="Restartfn" class="last-el-button">重启</el-button>
        </div>
         <div class="mytable">
           <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
            style="width: 100%">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
            <el-table-column prop="interface" label="网络接口名" min-width="100" ></el-table-column>
            <el-table-column prop="ipv4" label="IPV4地址" min-width="100"> </el-table-column>
            <el-table-column prop="subnet_mask" label="子网掩码" min-width="100"> </el-table-column>
            <el-table-column prop="gateway" label="网关" min-width="100"> </el-table-column>
            <el-table-column prop="state" label="状态" width="100">
                  <template #default="{row}">
                    <div class="public-flex">
                      {{row.state == 'UP' ? '开' : '关'}}
                    </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template #default="{row}">
                <div class="public-flex" @click="editfn(row)" style="color:#368ed9;cursor: pointer;">
                  编辑
                </div>
              </template>
            </el-table-column>
          </el-table>
         </div>
           <!-- 新增/修改 -->
           <el-dialog width="500px" draggable  :title="caozuoType" :close-on-click-modal='false' v-model="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">IPV4地址：</div>
                                <el-input v-model="nowItem.ipv4" placeholder="请输入IPV4地址"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">子网掩码：</div>
                                <el-input v-model="nowItem.subnet_mask" placeholder="请输入子网掩码"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">网关：</div>
                                <el-input v-model="nowItem.gateway" placeholder="请输入网关" :disabled='gatewayFlag'></el-input>
                            </div>
                         </div>
                         <div class="tips" style="margin-left:70px" v-show="gatewayFlag">提示：只能配置一个网关</div>

                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                     <template #footer>
                                 <div class="dialog-footer">
                                  <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                                 </div>
                    </template>
                   
                      
                    
           </el-dialog>
           
           <div class="el-loading-mask" v-show="isMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
          </div>
          <div class="el-loading-mask" v-show="isMasks">
             <div class="el-loading-spinner">
				<svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>
				<div>正在重新启动...</div>
				</div>
          </div>
    </div>
  </div>
</template>

<script>
import {restartSystem,pingSystem} from "../../api/forwardApi";
import {getNetworkConfigList,editNetworkConfigList} from "../../api/Interface";
export default {

  data() {
    return {
      tableData:[],
      isMasks:false,
      isMask:false,
      diaisMask:false,
      caozuoType:"修改",
      addeditflagline:false,
      nowItem:{
         ipv4:"",
        subnet_mask:"",
        gateway:"",
      },
      multipleSelection:[],
      gatewayFlag:false,

    };
  },

  mounted() {
    
    this.getList()
  },

  methods: {
    getList(){
        this.isMask = true
         getNetworkConfigList().then(res => {
            this.isMask = false
            if(res != undefined){
                res.data.forEach(item => {
                  item.mysort = item.interface.substr(-1)
                })
                res.data.sort((a, b) => a.mysort - b.mysort);
                 this.tableData = res.data
                 
            }
              
         })
    },
    editfn(row){
         var arr1 = this.tableData.filter(item => item.gateway != "")
        //  console.log("this.tableData",this.tableData,arr1);
         if(arr1.length == 0){
           this.gatewayFlag = false
         }else if(arr1[0].id == row.id){
           this.gatewayFlag = false
         }else {
           this.gatewayFlag = true
         }
         this.nowItem = JSON.parse(JSON.stringify(row))
         this.caozuoType = `修改(${row.interface})`
         this.addeditflagline = true
    },
    addpassageway(){
        const ipv4Regex = /^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
        if(this.nowItem.ipv4 != "" && !ipv4Regex.test(this.nowItem.ipv4)){
            this.$message({showClose: true,message: 'IPV4地址格式不正确',type: 'warning'});
            return
        }
        if(this.nowItem.gateway != "" && !ipv4Regex.test(this.nowItem.gateway)){
              this.$message({showClose: true,message: '网关格式不正确',type: 'warning'});
              return
        }
       var nowObj = [this.filterEmptyStringProperties(this.nowItem)]
         var arr11 = this.tableData.filter(item => item.id != nowObj[0].id)
         var zhongArr = nowObj.concat(arr11)
         var zhongObj = []
         zhongArr.forEach(item => {
            zhongObj.push(this.filterEmptyStringProperties(item))
         })
      //  console.log("编辑参数",zhongObj);
       this.diaisMask = true
       editNetworkConfigList(zhongObj).then(res => {
          this.diaisMask = false
          this.isMask = false
          this.getList()
          if(res != undefined && res.length != 0){
              this.addeditflagline = false
              this.Restartfn()
               this.$message({showClose: true,message: '修改成功',type: 'success'});
               
          }else {
              this.$message({showClose: true,message: '修改失败',type: 'error'});
          }
       })
    },
     filterEmptyStringProperties(obj) {
      const result = {};
      for (let key in obj) {
          if (obj.hasOwnProperty(key) && obj[key] !== '') {
              result[key] = obj[key];
          }
      }
      return result;
    },
    //提示重启
    Restartfn(){
      this.$confirm(`编辑操作后需要重启才能生效，是否要重启吗？`,'提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {  
                 this.isMasks = true
                restartSystem({'model':2}).then(res => {})
                 setTimeout(() => {
                    this.viewChongqi()
                  },10000)
              }).catch(() => {
                // ...
              });
    },
    //检查管理机是否重启完成
	 viewChongqi(){
		pingSystem().then(res => {
			// console.log("检查管理机心跳",res);
			if(res.code == 200){
				 this.isMasks = false
				 this.$message({showClose: true,message: '重启成功',type: 'success'});
			}
		}).catch(() => {
			 setTimeout(() => {
				 this.viewChongqi()
			 },2000)
		})
	 },
    
  },
};
</script>
<style lang="scss" scoped>
    .networkconfig {
          width: 100%;
          height: 100%;
          .con {
              width: 100%;
              height: 100%;
              padding: 12px;
              box-sizing: border-box;
              background-color: #fff;
              border-radius: 4px;
              position: relative;
              .topbtn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-bottom: 12px;
              }
              
              .mytable {
                 width: 100%;
                 height: calc(100% - 42px);
              }
          }
    }
</style>